<template>
	<view>
		<view class="header-location">
			<view class="locaticon" @click="showMulLinkageTwoPicker">
				<text class="name">{{matterText}}</text>
			</view>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" mode="selector" deepLength="1" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" :pickerValueArray="departmentList"></mpvue-picker>
		<mpvue-picker :themeColor="themeColor" ref="SelectEmployee" mode="selector" deepLength="1" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onSelectEmployee" :pickerValueArray="employee"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from '../mpvue-picker/mpvuePicker.vue';
	import util from '../../utils/util.js'
	import {
		reportMatterModule
	} from "../../modules/reportMatter.js"
	const reportMatter = new reportMatterModule()
     
	export default {
		components: {
			mpvuePicker
		},
		data() {
			return {
				matterText: '选择相关报事人',
				pickerValueDefault: [0], // picker 索引 
				themeColor: '#2A89F8', // 确定按钮的颜色
				departmentList: [], // 初始化 部门数组
				employee: [] // 初始化 员工数组
			};
		},
		onLoad() {
			let neiID = util.getStorage('neiID')
			reportMatter.GetOrganization(neiID) // 请求部门数据
				.then((res) => {
					this.departmentList = this._listEach(res) // 赋值部门
				})
		},
		methods: {
			showMulLinkageTwoPicker() { // 点击picker栏显示 picker
				this.$refs.mpvuePicker.show()
			},
			onConfirm(e) { // 部门选择确定按钮 
				this.matterText = e.label
				let orgID = e.value[0] 
				this.getEmployee(orgID) // 根据部门 id 请求对应的员工 数据
			},
			getEmployee(orgID) { // 请求员工数据
				reportMatter.GetEmployee(orgID)
					.then((res) => {
						this.employee = this._listEach(res) // 赋值员工
						this.$refs.SelectEmployee.show() // 显示新的picker
					})
			},
			onSelectEmployee(e) { // 员工选择确定事件
				this.matterText = `${this.matterText} / ${e.label}`
				let leaderID = e.value[0]
				this.$emit('onPicker',leaderID) // 向父级抛出 选择员工 id
				
			},
			_listEach(dataList) { // 处理返回数据，按照picker 数据格式重新赋值
				var list = []
				dataList.forEach(function(item, index) {
					let {
						label,
						value
					} = {
						label: item.orgName || item.empName,
						value: item.orgID || item.userID,
					}
					list.push({
						label,
						value
					})
				})
				return list
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/scss/common.scss";
	.header-location {
		padding-bottom: ws(15);
		margin: 0 ws(15);
		background-color: #FFFFFF;
		.locaticon {
			height: ws(40);
			background-color: #f7f7f7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0 ws(1) ws(4) 0 rgba(7, 17, 27, 0.1);
			padding: 0 ws(15);
			border-radius: ws(40);
			.name {
				display: flex;
				align-items: center;
				font-size: ws(14);
				color: #666;
				.mui-icon {
					font-size: ws(20);
					margin-right: ws(10);
				}
			}
			.icon {
				color: rgba(#fff,.9);
			}
		}
	}
	
</style>
